<template>
  <KView class="coupon-data-view">
    <KView class="coupon-data-view-content" :class="{'has-page':loading||hasNextData}">
      <coupon-item v-for="coupon in couponList" :key="`coupon_${coupon.keyId}`" :coupon="coupon" :is-self="isSelf" @collect-coupon="collectCoupon" @use-coupon="toUseCoupon">
      </coupon-item>
    </KView>

    <KView class="coupon-data-view-more" v-if="loading||hasNextData">
      <sys-loading v-if="loading" :size="60"></sys-loading>
      <KView v-else-if="hasNextData" class="coupon-data-view-btn" @click="lookMore">查看更多</KView>
    </KView>

    <sys-dialog is-center is-middle :visible.sync="openDialog" :width="750" :height="685" animation-name="bottom" @closed="dialogClosed">
      <template slot-scope="scope">
        <coupon-success-dialog v-if="scope.isShow" :coupon="selectCoupon" @close="closeDialog" @use-coupon="toUseCoupon"></coupon-success-dialog>
      </template>
    </sys-dialog>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';
  import CouponApi from 'services/couponApi';

  import SysLoading from 'common/sysLoading';
  import SysDialog from 'common/sysDialog';
  import CouponItem from './couponItem';
  import CouponSuccessDialog from './couponSuccessDialog';

  export default {
    props: {
      couponList: {
        type: Array,
        required: true
      },
      pagination: {
        type: Object,
        required: true
      },
      nextDataFun: {
        type: Function,
        required: true
      },
      isSearch: {
        type: Boolean,
        required: false
      },
      isSelf: {
        type: Boolean,
        required: false
      }
    },

    computed: {
      hasNextData() {
        return this.pagination.hasNextPage();
      }
    },

    data() {
      return {
        loading: false,
        isMiniprogram: process.env.isMiniprogram,
        selectCoupon: null,
        openDialog: false
      };
    },

    methods: {
      collectCoupon(couponData) {
        SystemUtil.showLoading('');
        CouponApi.collectCoupon(couponData).then(coupon => {
          let couponList = this.couponList;
          let index = couponList.indexOf(couponData);
          if (index > -1) {
            couponList.splice(index, 1, coupon);
          }

          this.selectCoupon = coupon;
          this.openDialog = true;
          SystemUtil.hideLoading();

          if (this.isSearch) {
            let pages = getCurrentPages();
            if (pages.length > 1) {
              let page = pages[pages.length - 2];
              let pageWin = page.window;
              if (pageWin.resetCoupon) {
                pageWin.resetCoupon(couponData);
              }
            }
          }
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      lookMore() {
        if (this.loading) {
          return;
        }

        let pagination = this.pagination;
        if (!pagination.hasNextPage()) {
          return;
        }

        pagination.nextPage();
        this.loading = true;
        this.nextDataFun().then(() => {
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      closeDialog() {
        this.openDialog = false;
      },

      dialogClosed() {
        this.selectCoupon = null;
      },

      toUseCoupon(coupon) {
        let shopData = coupon.getShopData();
        if (this.isMiniprogram) {
          let data = SystemUtil.formatFormParam(shopData);
          window.open(`/shopMall?${data}`);
        }
        this.openDialog = false;
      }
    },

    components: {
      SysLoading,
      SysDialog,
      CouponItem,
      CouponSuccessDialog
    }
  };

</script>

<style lang="scss">
  .coupon-data-view {
    padding: 0 formatPx(30);
    padding-top: formatPx(10);
    height: calc(100% - #{formatPx(10)});
    overflow: auto;

    .coupon-data-view-content {
      margin-bottom: formatPx(30);

      &.has-page {
        margin-bottom: 0;
      }

      .coupon-item {
        margin-bottom: formatPx(30);

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .coupon-data-view-more {
      position: relative;
      padding: formatPx(50) 0;
      height: formatPx(66);

      .coupon-data-view-btn {
        text-align: center;
        width: formatPx(255);
        height: 100%;
        line-height: formatPx(65);
        border: 1px solid #999999;
        font-size: formatPx(30);
        margin: auto;
        border-radius: formatPx(33);
      }
    }
  }

</style>
